<template>
  <div class="business-application-list">
    <!-- 头部 -->
    <div class="header">
      <i class="fas fa-arrow-left" @click="goBack"></i>
      <h3>我的开店申请</h3>
      <button class="add-btn" @click="toAddApplication" v-if="applications.length === 0">
        <i class="fas fa-plus"></i>
        申请开店
      </button>
    </div>

    <!-- 申请列表 -->
    <div class="application-list" v-if="applications.length > 0">
      <div class="application-item" v-for="app in applications" :key="app.id" @click="viewApplicationDetail(app.id)">
        <div class="app-header">
          <h4>{{ app.businessName }}</h4>
          <span :class="['status', getStatusClass(app.status)]">{{ getStatusText(app.status) }}</span>
        </div>
        <div class="app-content">
          <p><i class="fas fa-map-marker-alt"></i> {{ app.businessAddress }}</p>
          <p><i class="fas fa-phone"></i> {{ app.contactInfo }}</p>
          <p><i class="fas fa-clock"></i> 申请时间: {{ formatDate(app.createdDate) }}</p>
          <p v-if="app.reviewComment" class="review-comment">
            <i class="fas fa-comment"></i> 审核意见: {{ app.reviewComment }}
          </p>
        </div>
        <div class="app-actions">
          <button class="btn view-btn" @click.stop="viewApplicationDetail(app.id)">查看详情</button>
          <button class="btn edit-btn" @click.stop="editApplication(app.id)" v-if="app.status === 0">修改</button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-else>
      <i class="fas fa-store"></i>
      <p>您还没有开店申请</p>
      <button class="primary-btn" @click="toAddApplication">立即申请开店</button>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-actions" v-if="applications.length > 0">
      <button class="primary-btn" @click="toAddApplication">提交新申请</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { applicationAPI } from '@/api/application.js'

const router = useRouter()
const applications = ref([])
const loading = ref(false)

// 页面加载时获取申请列表
onMounted(async () => {
  await loadApplications()
})

// 加载申请列表
const loadApplications = async () => {
  loading.value = true
  try {
    const response = await applicationAPI.getMyApplications()
    console.log('完整响应:', response)

    // 简化数据处理逻辑
    let data = null

    // 根据实际响应结构调整
    if (response.data && response.data.success === true && response.data.data) {
      // 如果后端返回 { success: true, code: 'OK', data: [...], message: null }
      data = response.data.data
    } else if (response.data && Array.isArray(response.data)) {
      // 如果后端直接返回数组
      data = response.data
    } else {
      // 其他情况
      data = response.data
    }

    console.log('提取的申请列表数据:', data)

    if (data && Array.isArray(data)) {
      applications.value = data
      console.log('成功设置申请列表，数量:', applications.value.length)
    } else {
      console.error('未获取到申请列表数据或数据格式不正确', data)
      applications.value = []
    }
  } catch (error) {
    console.error('获取开店申请列表失败:', error)
    alert('获取申请列表失败')
    applications.value = []
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 跳转到添加申请页面
const toAddApplication = () => {
  router.push('/businessApplicationForm')
}

// 查看申请详情
const viewApplicationDetail = (applicationId) => {
  router.push(`/businessApplicationDetail/${applicationId}`)
}

// 编辑申请
const editApplication = (applicationId) => {
  router.push(`/businessApplicationForm/${applicationId}`)
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '审核通过',
    2: '审核不通过'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    0: 'pending',
    1: 'approved',
    2: 'rejected'
  }
  return classMap[status] || 'pending'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'})
}
</script>

<style scoped>
.business-application-list {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20vw;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4vw;
  background: white;
  border-bottom: 1px solid #eee;
  position: relative;
}

.header i {
  font-size: 5vw;
  color: #666;
  cursor: pointer;
}

.header h3 {
  font-size: 4.5vw;
  font-weight: normal;
  color: #333;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.add-btn {
  background: #ee5a24;
  color: white;
  border: none;
  padding: 2vw 3vw;
  border-radius: 1vw;
  font-size: 3.5vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.application-list {
  padding: 4vw;
}

.application-item {
  background: white;
  border-radius: 2vw;
  padding: 4vw;
  margin-bottom: 3vw;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.application-item:active {
  transform: scale(0.98);
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vw;
}

.app-header h4 {
  font-size: 4.5vw;
  color: #333;
  margin: 0;
}

.status {
  padding: 1vw 2vw;
  border-radius: 1vw;
  font-size: 3vw;
  font-weight: bold;
}

.status.pending {
  background: #fff3cd;
  color: #856404;
}

.status.approved {
  background: #d4edda;
  color: #155724;
}

.status.rejected {
  background: #f8d7da;
  color: #721c24;
}

.app-content p {
  margin: 2vw 0;
  font-size: 3.8vw;
  color: #666;
  display: flex;
  align-items: center;
  gap: 2vw;
}

.app-content i {
  width: 4vw;
  text-align: center;
  color: #999;
}

.review-comment {
  background: #f8f9fa;
  padding: 2vw;
  border-radius: 1vw;
  border-left: 3px solid #ee5a24;
}

.app-actions {
  display: flex;
  gap: 2vw;
  margin-top: 3vw;
}

.btn {
  padding: 2vw 3vw;
  border: 1px solid #ddd;
  border-radius: 1vw;
  font-size: 3.5vw;
  cursor: pointer;
  background: white;
}

.view-btn {
  color: #ee5a24;
  border-color: #ee5a24;
}

.edit-btn {
  color: #1890ff;
  border-color: #1890ff;
}

.empty-state {
  text-align: center;
  padding: 20vw 4vw;
  color: #999;
}

.empty-state i {
  font-size: 20vw;
  margin-bottom: 4vw;
  color: #ddd;
}

.empty-state p {
  font-size: 4.5vw;
  margin-bottom: 6vw;
}

.primary-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  border: none;
  padding: 4vw 8vw;
  border-radius: 2vw;
  font-size: 4.5vw;
  cursor: pointer;
}

.bottom-actions {
  position: fixed;
  bottom: 14vw;
  left: 0;
  right: 0;
  padding: 4vw;
  background: white;
  border-top: 1px solid #eee;
}

.bottom-actions .primary-btn {
  width: 100%;
}
</style>